<template>
  <div class="drawer" :class="ifShow ? 'show':''">
    <section class="header">
      <span>{{title}}</span>
      <img
        src="@/assets/message/exit.png"
        class="cp"
        @click="closeDrawer"
        alt=""
        ondragstart="return false"
      />
    </section>
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    ifShow: {
      require: Boolean,
      default: false
    },
    title: {
      require: String,
      default: ''
    }
  },
  methods: {
    closeDrawer () {
      this.$emit('closeDrawer')
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer {
  width: 480px;
  height: 100%;
  position: fixed;
  background-color: #fff;
  top: 0;
  right: -480px;
  z-index: 150;
  transition: right 0.5s;
  .header {
    box-sizing: border-box;
    height: 64px;
    line-height: 64px;
    border-bottom: 1px solid #ebedf3;
    padding-left: 20px;
    position: relative;
    overflow: hidden;
    img {
      width: 18px;
      height: 18px;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    span {
      font-size: 18px;
      color: #0D172C;
    }
  }
}
.show {
  right: 0;
  box-shadow: -10px 0px 16px 0px #ebedf3;
}
</style>
